<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="utf-8">
    <title>角色分配-菜单权限</title>
    <link rel="stylesheet" href="/components/treetable-lay/assets/layui/css/layui.css">
    <link rel="stylesheet" href="/components/treetable-lay/assets/common.css"/>
    <script src='/components/treetable-lay/assets/layui/layui.js'></script>
    <script src='/base/js/jquery-3.4.1.min.js'></script>
    <script src="/modules/js/app.js"></script>
</head>
<body>
<style>
    .layui-tree-branch {
        color: #EDCA50;
    }
</style>

<!-- 左边树 -->
<div style="display: inline-block;float:left; width: 18%; height: 500px; padding: 10px; border: 1px solid #ddd; overflow: auto;margin-top: 4%">
    <ul id="auth-tree"></ul>
</div>

<div class="searchTable layui-form">
    <div class="layui-inline" style="padding-top:  2%;margin-left: 50%">
        <input type="checkbox" lay-filter="method" name="method" value="1" lay-skin="primary" title="GET"/>
        <input type="checkbox" lay-filter="method" name="method" value="2" lay-skin="primary" title="PUT"/>
        <input type="checkbox" lay-filter="method" name="method" value="3" lay-skin="primary" title="POST"/>
        <input type="checkbox" lay-filter="method" name="method" value="4" lay-skin="primary" title="DELETE"/>
    </div>
</div>
<!-- 菜单树，数据表格-->
<div style="float:left; margin-left: 3%;width: 68%;margin-top: 0%;">
    <table id="auth-table" class="layui-table" lay-filter="auth-table"></table>
</div>

<!-- 确认分配按钮  -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-warm layui-btn-sm" onclick="xijiaEventUpdClick()">确认分配</button>
        <!--  <button class="layui-btn layui-btn-warm layui-btn-sm" onclick="xijiaEventPutAuthority()">扫描权限</button>-->
        <!--        <button id="GET" class="layui-btn layui-btn-primary layui-btn-sm" onclick="xijiaSelected(1)">GET</button>-->
        <!--        <button id="PUT" class="layui-btn layui-btn-primary layui-btn-sm" onclick="xijiaSelected(2)">PUT</button>-->
        <!--        <button id="POST" class="layui-btn layui-btn-primary layui-btn-sm" onclick="xijiaSelected(3)">POST</button>-->
        <!--        <button id="DELETE" class="layui-btn layui-btn-primary layui-btn-sm" onclick="xijiaSelected(4)">DELETE</button>-->
        <font size="2">当前角色: </font> <font size="2" color="red" id="roleName">未选择</font>
    </div>
</script>

<script>
    let role_find_list = path + "/admin/adminRole/findList";                  // 角色查询-所有
    let auth_find_list = path + "/admin/adminAuthority/findByRoleIdList";     // 取消查询--查询所有(角色check)
    let auth_upd_authority = path + "/admin/adminAuthority/refreshAuthority"; // 权限刷新扫描列表
    let updRoleUrlAuth = path + "/admin/adminRole/updRoleAuth";               // 角色URL权限修改


    let res;           // 后台返回完整菜单数据
    let checkData;     // 所有选中数据
    let roleId = -1;   // 角色Id
    let roleName;      // 角色名称

    layui.config({
        base: '../components/treetable-lay/module/' //静态资源所在路径
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['table', 'treetable', 'element', 'tree', 'form'], function () {
        // 复选框默认是否选中字段名
        layui.table = $.extend(layui.table, {config: {checkName: 'isChecked'}});
        // 获得菜单数据
        res = Ajax.get(auth_find_list);
        showTree();                    // 初始化左边边角色数据,treetable用于右边 table 数据重载
        xijiaRenderTable(res);         // 初始化右边 table 数据
        xijiaEventCheckbox();          // 监听复选框选中
        xijiaSelected();

        /**
         * 默认加载选择行的资源
         */
        xijiaEventRoleClick(parent.data)
    });


    /**
     *     生成左角色列表
     *
     * @date  2019/11/16 0016 16:56
     * @return
     */
    function showTree() {
        // 获得角色列表
        let roleRes = Ajax.get(role_find_list);
        // 左边角色菜单数据
        layui.tree({
            elem: '#auth-tree'
            , click: function (item) {
                // 点击回调
                xijiaEventRoleClick(item);
            }
            , nodes: [ //节点
                {
                    name: '角色列表'
                    , id: 0
                    , skin: 'shihuang'
                    , spread: true
                    , children: roleRes.data  //角色数据
                }
            ]

        });
        //生成一个模拟树
        let createTree = function (node, start) {
            node = node || function () {
                let arr = [];
                for (let i = 1; i < 10; i++) {
                    arr.push({
                        name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
                    });
                }
                return arr;
            }();
            start = start || 1;
            layui.each(node, function (index, item) {
                if (start < 10 && index < 9) {
                    let child = [
                        {
                            name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
                        }
                    ];
                    node[index].children = child;
                    createTree(child, index + start + 1);
                }
            });
            return node;
        };
    }


    /**
     *     table数据--（抽离出来方便重载）
     *
     * @date  2019/11/16 0016 16:56
     * @return
     * @param params
     */
    function xijiaRenderTable(res) {
        // 渲染表格
        layer.load(2);
        layui.treetable.render({
            toolbar: '#toolbar',
            id: "te",                   // 定义Id--用于复选框获取数据
            treeColIndex: 1,            // 菜单列索引 ,加载展开图标
            treeSpid: 0,                // 顶级父id
            treeIdName: 'id',           // id 名称
            treePidName: 'pid',         // fid 名称
            treeDefaultClose: false,    // 是否默认折叠
            treeLinkage: false,         // 父级展开时是否自动展开所有子级
            elem: '#auth-table',        // table 的 div
            data: res.data,        // 直接加载数据
            done: function () {
                layer.closeAll('loading');
            },
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'desc', title: '接口描叙'},
                    {field: 'method', title: '请求方式'},
                    {field: 'url', title: '接口地址'},

                ]
            ]
        });
    }


    /**
     *     监听复选框选中
     * @date  2019/11/16 0016 19:43
     * @return
     */
    function xijiaEventCheckbox() {
        // obj = 选中行数据
        layui.table.on('checkbox(auth-table)', function (obj) {
            //console.log(JSON.stringify(obj))
            if (obj.type === "all") {
                // 更新所有选中数据te = 数据表格Id
                checkData = table.checkStatus('te');
            } else if (obj.type === "one") {
                // 递归选中/取消选中
                isChecked(res.data, obj.data, obj.checked);
                WindowPos.onbeforeunload();  // 记录滚动条位置
                xijiaRenderTable(res);          // 重载数据
                WindowPos.onload();          // 还原滚动条位置
                // 更新所有选中数据te = 数据表格Id
                checkData = layui.table.checkStatus('te');
            }
            // 展示选中
            $("#roleName").html(roleName);
        });
    }

    /**
     *   遍历子节点判断--> 选中/ 取消选中
     * @author ws
     * @mail  1720696548@qq.com
     * @date  2020/4/27 0027 17:14
     * @param nodeAll 所有节点
     * @param node 当前节点
     * @param checked 选中true / 取消false
     * @return
     */
    function isChecked(nodeAll, node, checked) {
        // 当菜单级别为3(页面时)，跳出，不往下递归
        if (node.pid !== '' && node.pid !== 0) {
            return;
        }
        // console.log("父菜单name=" + node.name + "")
        for (let i = 0; i < nodeAll.length; i++) {
            if (node.id === nodeAll[i].pid) {
                //赋值
                nodeAll[i].isChecked = checked;
                // console.log("id=" + nodeAll[i].id + "  name=" + nodeAll[i].name)
                //递归
                isChecked(nodeAll, nodeAll[i], checked)
            }
        }
    }

    /**
     *    角色选中回调
     * @param item 当前选中的角色行数据
     * @date  2019/11/16 0016 19:43
     * @return
     */
    function xijiaEventRoleClick(item) {
        //不能点击角色列表
        if (item.id === 0) {
            return;
        }
        let params = "";
        params += "?roleId=" + item.id;
        // 获得菜单数据
        res = Ajax.get(auth_find_list + params);
        // 重载
        xijiaRenderTable(res);
        // 当前角色id
        roleId = item.id;
        roleName = item.name;
        // 展示选中
        $("#roleName").html(roleName);
    }


    /**
     *   角色选中状态添加 CSS样式
     * @date  2019/11/16 0016 17:22
     */
    $("body").on("mousedown", ".layui-tree a", function () {
        if (!$(this).siblings('ul').length) {
            $(".layui-tree a cite").css('color', '#333');
            $(this).find('cite').css('color', '#009688');
        }
    });


    /**
     *   菜单权限分配( JS点击事件)
     * @author ws
     * @mail  1720696548@qq.com
     * @date  2020/4/10 0010 0:05
     * @return
     */
    function xijiaEventUpdClick() {
        if (roleId === -1) {
            layer.msg("没有选选择角色");
            return;
        }
        if (checkData === null || checkData === undefined || checkData.data === null) {
            layer.msg("没有可更新的内容");
            return;
        }
        // 获取数据
        let authIds = [];
        for (let i in checkData.data) {
            authIds[i] = checkData.data[i].id
        }
        // 拼接数据并修改
        let data = {
            roleId: roleId,
            authIds: authIds
        };
        let result = Ajax.put(updRoleUrlAuth, data);
        layer.msg(result.msg + " 当前角色拥有菜单：" + checkData.data.length + "个 ")
    }


    /**
     *   权限扫描
     * @author ws
     * @mail  1720696548@qq.com
     * @date  2020/4/28 0028 1:04
     * @return
     */
    function xijiaEventPutAuthority() {
        let result = Ajax.put(auth_upd_authority);
        layer.msg(result.msg + ",请刷新页面");
    }

    /**
     * 选中指定请求的所有
     */
    var GET = false;
    var PUT = false;
    var POST = false;
    var DELETE = false;

    function xijiaSelected() {
        layui.form.on('checkbox(method)', function (data) {
            GET = false;
            PUT = false;
            POST = false;
            DELETE = false;
            $("input[name='method']:checked").each(function (i) {
                if ($(this).val() === "1") {
                    GET = true;
                }
                if ($(this).val() === "2") {
                    PUT = true;
                }
                if ($(this).val() === "3") {
                    POST = true;
                }
                if ($(this).val() === "4") {
                    DELETE = true;
                }
            });

            // 递归选中/取消选中
            for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].method === "GET") {
                    res.data[i].isChecked = GET;
                }
                if (res.data[i].method === "PUT") {
                    res.data[i].isChecked = PUT;
                }
                if (res.data[i].method === "POST") {
                    res.data[i].isChecked = POST;
                }
                if (res.data[i].method === "DELETE") {
                    res.data[i].isChecked = DELETE;
                }
            }
            // 父id, 如果自己存在选中,那就选中这个父id
            for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].pid === "") {
                    for (let j = 0; j < res.data.length; j++) {
                        if (res.data[j].pid === res.data[i].id && res.data[j].isChecked) {
                            res.data[i].isChecked = true;
                        }
                    }
                    res.data[i].isChecked = GET;
                }
            }
            WindowPos.onbeforeunload();  // 记录滚动条位置
            xijiaRenderTable(res);          // 重载数据
            WindowPos.onload();          // 还原滚动条位置
            // 更新所有选中数据te = 数据表格Id
            checkData = table.checkStatus('te');

            // 重载数据后显示角色
            $("#roleName").html(roleName);
            //还原复选选中状态
            $("#method").find("input").each(function () {
                if ($(this).val() === "1" && GET) {
                    $(this).attr("checked", "");
                }
                if ($(this).val() === "2" && PUT) {
                    $(this).attr("checked", "");
                }
                if ($(this).val() === "3" && POST) {
                    $(this).attr("checked", "");
                }
                if ($(this).val() === "4" && DELETE) {
                    $(this).attr("checked", "");
                }
            });
        });
    }
</script>
</body>
</html>
